<template>
  <!--主内容-->
  <div class="row">
    <!--左侧树形菜单-->
    <div class="col-md-4">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">{{currentSide.bridgeName+" "+currentSide.sideTypeName + " "}}孔跨</h3>
        </div>
        <el-scrollbar tag="div" class="div-body no-padding" style="height: 100%;">
          <el-tree
            class="tree-view-scrollable"
            node-key="id"
            :data="bridgeSiteList"
            :props="{label:'siteName', children:''}"
            :render-content="renderContent"
            :current-node-key="selectedNode.id"
            @node-click="handleNodeClick"
            highlight-current>
          </el-tree>
        </el-scrollbar>
      </div>
    </div>
    <!--右侧的表格区域-->
    <div class="col-md-8">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">{{tableTitle}}</h3>
        </div>
        <!--部构件表格-->
        <div class="box-body">
          <!--按钮区域-->
          <div class="btn-area">
            <el-button v-if="canAdd" size="mini" style="margin-right: 8px;" @click="handleSiteManage">跨径组合</el-button>
            <el-button v-if="canAdd" size="mini" style="margin-right: 8px;" @click="handleSuperstructure">上部结构
            </el-button>
            <el-button v-if="canAdd" size="mini" @click="handlePier">桥墩</el-button>
            <el-button v-if="canAdd" size="mini" @click="handleAbutment">桥台</el-button>
            <el-button v-if="canAdd" size="mini" @click="handleRiverbed">河床</el-button>
            <el-button v-if="canAdd" size="mini" style="margin-right: 8px" @click="handleRegulatingStructure">调治构造物
            </el-button>
            <el-button v-if="canAdd" size="mini" @click="handleDeck">桥面系</el-button>
            <el-button v-if="canAdd" size="mini" @click="handleExpansionJoint">伸缩缝装置</el-button>
            <el-button size="mini" class="pull-right" @click="handleBack"><i class="fa fa-chevron-left"></i>&nbsp;&nbsp;返回
            </el-button>
          </div>
          <!--部构件表格区域-->
          <div
            class="el-table el-table--fit el-table--striped el-table--border el-table--enable-row-hover el-table--enable-row-transition">
            <!--表格标题-->
            <div class="el-table__header-wrapper">
              <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width:100%;">
                <thead>
                <tr>
                  <th class="is-center" style="width: 70px;">
                    <div class="cell">部位</div>
                  </th>
                  <th class="is-center" style="width: 130px;">
                    <div class="cell">部件</div>
                  </th>
                  <th class="is-center" style="width: 100px;">
                    <div class="cell">构件</div>
                  </th>
                  <th class="is-center">
                    <div class="cell">结构类型</div>
                  </th>
                  <th class="is-center">
                    <div class="cell">材料类型</div>
                  </th>
                  <th class="is-center" style="width:70px">
                    <div class="cell">数量</div>
                  </th>
                  <th class="is-center" style="width:120px">
                    <div class="cell">操作</div>
                  </th>
                </tr>
                </thead>
              </table>
            </div>
            <!--表格主体-->
            <div class="el-table__body-wrapper">
              <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width:100%;">
                <tbody>
                <tr v-for="item of bridgePartsList">
                  <!--部位-->
                  <td v-if="!!item.positionRowSpan" class="is-center" style="width: 70px;"
                      :rowspan="item.positionRowSpan">
                    <div class="cell">{{item.positionTypeName}}</div>
                  </td>
                  <!--部件-->
                  <td v-if="!!item.partsRowSpan" class="is-center" style="width: 130px;" :rowspan="item.partsRowSpan">
                    <div class="cell">{{item.partsTypeName}}</div>
                  </td>
                  <!--构件-->
                  <td class="is-center" style="width: 100px;">
                    <div class="cell">{{item.memberTypeName}}</div>
                  </td>
                  <!--结构类型-->
                  <td class="is-center">
                    <div class="cell">{{!!item.structureTypeName?item.structureTypeName:"/"}}</div>
                  </td>
                  <!--材料类型-->
                  <td class="is-center">
                    <div class="cell">{{!!item.materialTypeName?item.materialTypeName:"/"}}</div>
                  </td>
                  <!--数量-->
                  <td class="is-center" style="width:70px">
                    <div class="cell">{{item.count}}</div>
                  </td>
                  <!--操作列-->
                  <td class="is-center" style="width:120px;">
                    <div class="cell">
                      <el-button v-if="canEdit" size="mini" @click="handleEdit(item)">修改</el-button>
                      <el-button v-if="canDelete" size="mini" type="danger" @click="handleDelete(item)">删除</el-button>
                    </div>
                  </td>
                </tr>
                </tbody>
              </table>
              <div v-if="!bridgePartsList || bridgePartsList.length===0" class="el-table__empty-block"
                   style="width: 100%">
                <span class="el-table__empty-text" style="width: 100%;">
                  构件添加步骤：（1）先填跨径组合生成孔跨；（2）然后再添加上部结构；（3）最后添加下部结构及桥面系等。
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--对话框-->
    <el-dialog title="输入跨径组合" custom-class="el-dialog--tiny" :visible.sync="isSiteDialogVisible" v-model="isSiteDialogVisible"
               :close-on-click-modal="false">
      <el-form :model="siteForm" :rules="siteRules" ref="siteForm" label-width="100px">
        <el-form-item label="跨径组合(m)" prop="bridgeSpanCombination">
          <el-input v-model="siteForm.bridgeSpanCombination" :min="0" placeholder="多联格式：(孔数*跨径)+(孔数*跨径)..."></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isSiteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSite" :loading="isSiteUpdating">确 定</el-button>
      </div>
    </el-dialog>

    <!--添加上部结构的对话框-->
    <el-dialog title="批量添加或修改上部结构" size="large" :visible.sync="isSuperstructureDialogVisible" v-model="isSuperstructureDialogVisible" :close-on-click-modal="false">
      <el-form :model="superstructureForm" :rules="superstructureRules" ref="superstructureForm" inline>
        <el-row>
          <!--预留的空各位，用于对齐表单-->
          <label class="el-form-item__label member-name"></label>
          <!--全局的三个表单项-->
          <label class="el-form-item__label input-label">起始孔号</label>
          <el-form-item>
            <el-input-number v-model="superstructureForm.startSiteNo" class="input-item" :min="0"
                             :max="bridgeSiteList.length"></el-input-number>
          </el-form-item>
          <el-form-item prop="endSiteNo">
            <label class="el-form-item__label input-label">结束孔号</label>
            <el-input-number v-model="superstructureForm.endSiteNo" class="input-item" :min="0"
                             :max="bridgeSiteList.length"></el-input-number>
          </el-form-item>
          <label class="el-form-item__label input-label">上部结构类型</label>
          <el-form-item prop="structureTypeId">
            <el-select v-model="superstructureForm.structureTypeId" class="input-item"
                       @change="handleSuperstructureTypeChange" placeholder="选择上部结构类型" filterable>
              <el-option-group v-for="group of superstructureTypeSelectData" :key="group.id" :label="group.name">
                <el-option v-for="item of group.children" :key="item.id" :label="item.name"
                           :value="item.id"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row v-for="item of superstructureForm.partsList" :key="item.id">
          <!--构件名称-->
          <label class="el-form-item__label member-name">{{!!item.memberTypeName?item.memberTypeName:""}}：</label>
          <!--支座类型-->
          <label class="el-form-item__label input-label" v-if="item.memberTypeName === '支座'">支座类型</label>
          <el-form-item v-if="item.memberTypeName === '支座'">
            <el-select v-model="item.structureTypeId" class="input-item" placeholder="选择支座类型" default-first-option
                       filterable>
              <el-option v-for="s of supportTypeList" :key="s.id" :label="s.name" :value="s.id"></el-option>
            </el-select>
          </el-form-item>
          <!--材料类型-->
          <label class="el-form-item__label input-label" v-if="item.memberTypeName !== '支座'">材料类型</label>
          <el-form-item v-if="item.memberTypeName !== '支座'">
            <el-select v-model="item.materialTypeId" class="input-item" placeholder="选择材料类型" filterable>
              <el-option v-for="m of materialTypeList" :key="m.id" :label="m.name" :value="m.id"></el-option>
            </el-select>
          </el-form-item>
          <!--纵桥向数量-->
          <label class="el-form-item__label input-label" v-if="containVerticalNo(item.memberDesc)">纵桥向数量</label>
          <el-form-item v-if="containVerticalNo(item.memberDesc)">
            <el-input-number class="input-item" v-model="item.verticalCount" :min="0"></el-input-number>
          </el-form-item>
          <!--横桥向数量-->
          <label class="el-form-item__label input-label" v-if="containHorizontalNo(item.memberDesc)">横桥向数量</label>
          <el-form-item v-if="containHorizontalNo(item.memberDesc)">
            <el-input-number class="input-item" v-model="item.horizontalCount" :min="0"></el-input-number>
          </el-form-item>
          <!--桩号侧区分-->
          <el-form-item v-if="containStakeSide(item.memberDesc)">
            <el-select v-model="item.stakeSide" class="input-item" placeholder="选择大小桩号侧" clearable>
              <el-option label="小桩号侧" value="1"></el-option>
              <el-option label="大桩号侧" value="2"></el-option>
              <el-option label="大小桩号侧对称" value="3"></el-option>
            </el-select>
          </el-form-item>
          <!--特殊块段-->
          <el-form-item v-if="containSpecialSection(item.memberDesc)">
            <el-checkbox-group v-if="containSpecialSection(item.memberDesc)" class="check-item group"
                               v-model="item.specialSectionList">
              <el-checkbox label="合拢段"></el-checkbox>
              <el-checkbox label="边跨现浇段"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isSuperstructureDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSuperstructure" :loading="isSuperstructureUpdating">确 定</el-button>
      </div>
    </el-dialog>

    <!--添加桥墩的对话框-->
    <el-dialog title="批量添加或修改桥墩" size="large" v-model="isPierDialogVisible" :close-on-click-modal="false">
      <el-form :model="pierForm" :rules="pierRules" ref="pierForm" inline>
        <el-row>
          <!--预留的空各位，用于对齐表单-->
          <label class="el-form-item__label member-name"></label>
          <!--全局的三个表单项-->
          <label class="el-form-item__label input-label">起始墩号</label>
          <el-form-item>
            <el-input-number v-model="pierForm.startSiteNo" class="input-item" :min="0"
                             :max="bridgeSiteList.length-1"></el-input-number>
          </el-form-item>
          <el-form-item prop="endSiteNo">
            <label class="el-form-item__label input-label">结束墩号</label>
            <el-input-number v-model="pierForm.endSiteNo" class="input-item" :min="0"
                             :max="bridgeSiteList.length-1"></el-input-number>
          </el-form-item>
          <label class="el-form-item__label input-label">桥墩类型</label>
          <el-form-item prop="structureTypeId">
            <el-select v-model="pierForm.structureTypeId" class="input-item" placeholder="选择桥墩类型" filterable>
              <el-option v-for="item of pierTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--部件所对应的构件输入表单-->
        <el-row v-for="item of pierForm.partsList" v-if="item.partsTypeName !== '墩台基础'" :key="item.id">
          <!--构件名称-->
          <label class="el-form-item__label member-name">{{!!item.memberTypeName?item.memberTypeName:""}}：</label>
          <!--横桥向数量-->
          <label class="el-form-item__label input-label">数量</label>
          <el-form-item>
            <el-input-number class="input-item" v-model="item.horizontalCount" :min="0"></el-input-number>
          </el-form-item>
          <!--材料类型-->
          <label class="el-form-item__label input-label">材料类型</label>
          <el-form-item>
            <el-select v-model="item.materialTypeId" class="input-item" placeholder="选择材料类型" filterable>
              <el-option v-for="m of materialTypeList" :key="m.id" :label="m.name" :value="m.id"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isPierDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePier" :loading="isPierUpdating">确 定</el-button>
      </div>
    </el-dialog>

    <!--桥台对话框-->
    <el-dialog title="批量添加或修改桥台" size="large" v-model="isAbutmentDialogVisible" :close-on-click-modal="false">
      <el-form :model="abutmentForm" :rules="abutmentRules" ref="abutmentForm" inline>
        <el-row>
          <!--预留的空各位，用于对齐表单-->
          <label class="el-form-item__label member-name"></label>
          <!--全局的三个表单项-->
          <label class="el-form-item__label input-label">小桩号侧桥台</label>
          <el-form-item>
            <el-input-number v-model="abutmentForm.startSiteNo" class="input-item" :min="0" :max="0"
                             disabled></el-input-number>
          </el-form-item>
          <el-form-item prop="endSiteNo">
            <label class="el-form-item__label input-label">大桩号侧桥台</label>
            <el-input-number v-model="abutmentForm.endSiteNo" class="input-item" :min="bridgeSiteList.length"
                             :max="bridgeSiteList.length" disabled></el-input-number>
          </el-form-item>
          <label class="el-form-item__label input-label">桥台类型</label>
          <el-form-item prop="structureTypeId">
            <el-select v-model="abutmentForm.structureTypeId" class="input-item" @change="handleAbutmentTypeChange"
                       placeholder="选择桥台类型" filterable>
              <el-option v-for="item of abutmentTypeList" :key="item.id" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!--部件所对应的构件输入表单-->
        <el-row v-for="item of abutmentForm.partsList" v-if="item.partsTypeName !== '墩台基础'" :key="item.id">
          <!--构件名称-->
          <label class="el-form-item__label member-name">{{!!item.memberTypeName?item.memberTypeName:""}}：</label>
          <!--横桥向数量-->
          <label class="el-form-item__label input-label" v-if="item.partsTypeName === '桥台'">数量</label>
          <el-form-item v-if="item.partsTypeName === '桥台'">
            <el-input-number class="input-item" v-model="item.horizontalCount" :min="0"></el-input-number>
          </el-form-item>
          <!--材料类型-->
          <label class="el-form-item__label input-label">材料类型</label>
          <el-form-item>
            <el-select v-model="item.materialTypeId" class="input-item" placeholder="选择材料类型" filterable>
              <el-option v-for="m of materialTypeList" :key="m.id" :label="m.name" :value="m.id"></el-option>
            </el-select>
          </el-form-item>
          <!--翼墙、耳墙、锥坡，分左右侧-->
          <el-form-item v-if="item.partsTypeName === '翼墙、耳墙' || item.partsTypeName === '锥坡、护坡'">
            <el-checkbox-group class="check-item group" v-model="item.specialSectionList">
              <el-checkbox v-if="item.memberTypeName !== '护坡'" label="左侧"></el-checkbox>
              <el-checkbox v-if="item.memberTypeName !== '护坡'" label="右侧"></el-checkbox>
              <el-checkbox v-if="item.memberTypeName === '护坡'" label="存在"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAbutmentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateAbutment" :loading="isAbutmentUpdating">确 定</el-button>
      </div>
    </el-dialog>

    <!--河床及调治构造物-->
    <el-dialog :title="siteRangeDialogTitle" size="small" v-model="isSiteRangeDialogVisible"
               :close-on-click-modal="false">
      <el-form :model="siteRangeForm" :rules="siteRangeRules" ref="siteRangeForm" v-loading="loadingSiteRange" inline>
        <!--全局的三个表单项-->
        <label class="el-form-item__label input-label">起始孔跨</label>
        <el-form-item>
          <el-input-number v-model="siteRangeForm.startSiteNo" class="input-item" :min="0" :max="3"></el-input-number>
        </el-form-item>
        <label class="el-form-item__label input-label">结束孔跨</label>
        <el-form-item prop="endSiteNo">
          <el-input-number v-model="siteRangeForm.endSiteNo" class="input-item" :min="0" :max="3"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isSiteRangeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSiteRange" :loading="isSiteRangeUpdating">确 定</el-button>
      </div>
    </el-dialog>

    <!--桥面系-->
    <el-dialog title="批量添加或修改桥面系" size="tiny" v-model="isDeckDialogVisible" :close-on-click-modal="false">
      <el-form :model="deckForm" :rules="deckRules" ref="deckForm" v-loading="loadingDeck" inline>
        <el-row>
          <!--全局的三个表单项-->
          <label class="el-form-item__label input-label">孔跨范围：</label>
          <el-form-item prop="siteRange">
            <el-input v-model="deckForm.siteRange" style="width: 200px;" placeholder="示例：1,2,3,4,5或者1-5"></el-input>
          </el-form-item>
        </el-row>
        <!--部件所对应的构件输入表单-->
        <el-row v-for="item of deckForm.partsList" v-if="item.partsTypeName !== '伸缩缝装置'" :key="item.id">
          <!--构件名称-->
          <label class="el-form-item__label member-name">{{!!item.memberTypeName?item.memberTypeName:""}}：</label>
          <!--材料类型-->
          <el-form-item v-if="item.partsTypeName === '桥面铺装'">
            <el-select v-model="item.materialTypeId" style="width: 200px;" placeholder="选择材料类型" filterable>
              <el-option v-for="m of materialTypeList" :key="m.id" :label="m.name" :value="m.id"></el-option>
            </el-select>
          </el-form-item>
          <!--人行道、栏杆、护栏，分左右侧-->
          <el-form-item v-if="item.partsTypeName === '人行道' || item.partsTypeName === '栏杆、护栏'">
            <el-checkbox-group class="check-item group" v-model="item.specialSectionList">
              <el-checkbox label="左侧"></el-checkbox>
              <el-checkbox label="右侧"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!--排水系统、照明、标志是否存在-->
          <el-form-item v-if="item.partsTypeName === '排水系统' || item.partsTypeName === '照明、标志'">
            <el-checkbox-group class="check-item group" v-model="item.specialSectionList">
              <el-checkbox label="存在"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isDeckDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateDeck" :loading="isDeckUpdating">确 定</el-button>
      </div>
    </el-dialog>

    <!--伸缩缝批量添加-->
    <el-dialog title="批量添加或修改伸缩缝装置" size="large" v-model="isExpansionJointDialogVisible" :close-on-click-modal="false">
      <el-form :model="expansionJointForm" :rules="expansionJointRules" ref="expansionJointForm"
               v-loading="loadingExpansionJoint" inline>
        <!--预留的空各位，用于对齐表单-->
        <label class="el-form-item__label member-name"></label>
        <!--孔跨范围-->
        <label class="el-form-item__label input-label">所属墩台号</label>
        <el-form-item prop="siteRange">
          <el-input v-model="expansionJointForm.siteRange" style="width: 200px;"
                    placeholder="示例：0,1,2,3,4,5或者0-5"></el-input>
        </el-form-item>
        <!--伸缩缝类型-->
        <label class="el-form-item__label input-label">伸缩缝类型</label>
        <el-form-item prop="structureTypeId">
          <el-select v-model="expansionJointForm.structureTypeId" style="width: 200px;" placeholder="选择伸缩缝类型"
                     filterable>
            <el-option v-for="item of expansionJointTypeList" :key="item.id" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isExpansionJointDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateExpansionJoint" :loading="isExpansionJointUpdating">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑的对话框-->
    <el-dialog :title="'编辑' + editForm.memberTypeName" size="large" v-model="isEditDialogVisible"
               :close-on-click-modal="false">
      <el-form :model="editForm" ref="editForm" inline>
        <!--上部结构的表单-->
        <div v-if="editForm.positionTypeName === '上部结构'">
          <!--支座类型-->
          <label class="el-form-item__label input-label" v-if="editForm.memberTypeName === '支座'">支座类型</label>
          <el-form-item v-if="editForm.memberTypeName === '支座'">
            <el-select v-model="editForm.structureTypeId" class="input-item" placeholder="选择支座类型" default-first-option
                       filterable>
              <el-option v-for="s of supportTypeList" :key="s.id" :label="s.name" :value="s.id"></el-option>
            </el-select>
          </el-form-item>
          <!--材料类型-->
          <label class="el-form-item__label input-label" v-if="editForm.memberTypeName !== '支座'">材料类型</label>
          <el-form-item v-if="editForm.memberTypeName !== '支座'">
            <el-select v-model="editForm.materialTypeId" class="input-item" placeholder="选择材料类型" filterable>
              <el-option v-for="m of materialTypeList" :key="m.id" :label="m.name" :value="m.id"></el-option>
            </el-select>
          </el-form-item>
          <!--纵桥向数量-->
          <label class="el-form-item__label input-label" v-if="containVerticalNo(editForm.memberDesc)">纵桥向数量</label>
          <el-form-item v-if="containVerticalNo(editForm.memberDesc)">
            <el-input-number class="input-item" v-model="editForm.verticalCount" :min="0"></el-input-number>
          </el-form-item>
          <!--横桥向数量-->
          <label class="el-form-item__label input-label" v-if="containHorizontalNo(editForm.memberDesc)">横桥向数量</label>
          <el-form-item v-if="containHorizontalNo(editForm.memberDesc)">
            <el-input-number class="input-item" v-model="editForm.horizontalCount" :min="0"></el-input-number>
          </el-form-item>
          <!--桩号侧区分-->
          <el-form-item v-if="containStakeSide(editForm.memberDesc)">
            <el-select v-model="editForm.stakeSide" class="input-item" placeholder="选择大小桩号侧" clearable>
              <el-option label="小桩号侧" value="1"></el-option>
              <el-option label="大桩号侧" value="2"></el-option>
              <el-option label="大小桩号侧对称" value="3"></el-option>
            </el-select>
          </el-form-item>
          <!--特殊块段-->
          <el-form-item v-if="containSpecialSection(editForm.memberDesc)">
            <el-checkbox-group v-if="containSpecialSection(editForm.memberDesc)" class="check-item group"
                               v-model="editForm.specialSectionList">
              <el-checkbox label="边跨现浇段"></el-checkbox>
              <el-checkbox label="合拢段"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

        <!--下部结构、桥面系表单-->
        <div v-else>
          <el-form-item v-if="containHorizontalNo(editForm.memberDesc)">
            <label class="el-form-item__label input-label">数量</label>
            <el-input-number class="input-item" v-model="editForm.horizontalCount" :min="0"></el-input-number>
          </el-form-item>
          <!--材料类型-->
          <el-form-item v-if="hasMaterialType">
            <label class="el-form-item__label input-label">材料类型</label>
            <el-select v-model="editForm.materialTypeId" class="input-item" placeholder="选择材料类型" filterable>
              <el-option v-for="m of materialTypeList" :key="m.id" :label="m.name" :value="m.id"></el-option>
            </el-select>
          </el-form-item>
          <!--分左右侧-->
          <el-form-item v-if="containSpecialSection(editForm.memberDesc)">
            <el-checkbox-group class="check-item group" v-model="editForm.specialSectionList">
              <el-checkbox label="左侧"></el-checkbox>
              <el-checkbox label="右侧"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!--伸缩缝类型-->
          <el-form-item prop="structureTypeId" v-if="editForm.partsTypeName === '伸缩缝装置'">
            <label class="el-form-item__label input-label">伸缩缝类型</label>
            <el-select v-model="editForm.structureTypeId" style="width: 200px;" placeholder="选择伸缩缝类型" filterable>
              <el-option v-for="item of expansionJointTypeList" :key="item.id" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editParts" :loading="isEditing">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {childrenArrayOf, treeOf} from "../../assets/js/utils/TreeUtils"
  import {doDelete, doGet, doPost} from "../../assets/js/utils/RequestUtils"
  import {ADD, DELETE, EDIT} from "../../assets/js/enum/FunctionType"
  import {hasAuthorizedFunction, getAuthorizedFunction} from "../../assets/js/global"
  import {LOADING, COMPLETE} from "../../store/mutationTypes"
  import {clearFields, appendMergeProp} from "../../assets/js/utils/ObjectUtils";
  import {VERTICAL_NO, HORIZONTAL_NO, STAKE_SIDE, SPECIAL_SECTION, PIER_NO} from "../../assets/js/enum/MemberDescParam"

  const BRIDGE_PARTS_DATA_URL = "/bridge/bridgeSide/bridgeParts/getListBySiteNo";
  const SITE_DATA_URL = "/bridge/bridgeSide/bridgeSite/getList";
  const SPAN_COMBINATION_CHECK_URL = "/bridge/bridgeSide/bridgeSite/isSpanCombinationValid";
  const ADD_SITE_URL = "/bridge/bridgeSide/bridgeSite/addSite";
  const ADD_SUPERSTRUCTURE_URL = "/bridge/bridgeSide/bridgeParts/addSuperstructure";
  const SUPERSTRUCTURE_TYPE_DATA_URL = "/bridge/bridgeSide/bridgeParts/getSuperstructureTypeList";
  const EDIT_URL = "/bridge/bridgeSide/bridgeParts/edit";
  const DELETE_URL = "/bridge/bridgeSide/bridgeParts/delete";
  const SUPER_PARTS_DATA_URL = "/bridge/bridgeSide/bridgeParts/getListBySuperstructure";
  const MATERIAL_TYPE_DATA_URL = "/bridge/bridgeSide/bridgeParts/getMaterialTypeList";
  const SUPPORT_TYPE_DATA_URL = "/bridge/bridgeSide/bridgeParts/getSupportTypeList";
  const PIER_TYPE_DATA_URL = "/bridge/bridgeSide/bridgeParts/getPierTypeList";
  const PIER_PARTS_DATA_URL = "/bridge/bridgeSide/bridgeParts/getListByPier";
  const ADD_PIER_URL = "/bridge/bridgeSide/bridgeParts/addPier";
  const ABUTMENT_TYPE_DATA_URL = "/bridge/bridgeSide/bridgeParts/getAbutmentTypeList";
  const ABUTMENT_PARTS_DATA_URL = "/bridge/bridgeSide/bridgeParts/getListByAbutment";
  const ADD_ABUTMENT_URL = "/bridge/bridgeSide/bridgeParts/addAbutment";
  const RIVERBED_PARTS_DATA_URL = "/bridge/bridgeSide/bridgeParts/getListByRiverbed";
  const REGULATING_STRUCTURE_PARTS_DATA_URL = "/bridge/bridgeSide/bridgeParts/getListByRegulatingStructure";
  const ADD_SITE_RANGE_URL = "/bridge/bridgeSide/bridgeParts/addSiteRange";
  const DECK_PARTS_DATA_URL = "/bridge/bridgeSide/bridgeParts/getListByDeck";
  const ADD_DECK_URL = "/bridge/bridgeSide/bridgeParts/addDeck";
  const EXPANSION_JOINT_TYPE_DATA_URL = "/bridge/bridgeSide/bridgeParts/getExpansionJointTypeList";
  const EXPANSION_JOINT_PARTS_DATA_URL = "/bridge/bridgeSide/bridgeParts/getListByExpansionJoint";
  const ADD_EXPANSION_JOINT_URL = "/bridge/bridgeSide/bridgeParts/addExpansionJoint";

  export default {
    name: "BridgeMemberManagement",
    props: {
      currentSide: {
        type: Object,
        required: true
      }
    },
    data() {
      //跨径组合校验
      let spanCombinationValidator = (rule, value, callback) => {
        doGet(SPAN_COMBINATION_CHECK_URL, {
          data: {
            bridgeId: this.currentSide.bridgeId,
            sideTypeId: this.currentSide.sideTypeId,
            bridgeSpanCombination: this.siteForm.bridgeSpanCombination
          },
          component: this
        }).then(response => {
          if (response.status === "SUCCESS") {
            callback();
          } else {
            callback(new Error(response.message));
          }
        })
      };

      //输入的孔跨校验
      let endSiteNoValidator = (rule, value, callback) => {
        if (value === 0 || parseInt(this.superstructureForm.startSiteNo) > parseInt(value)) {
          callback(new Error("结束孔跨不能小于起始孔跨"))
        } else {
          callback();
        }
      };

      //输入的墩号校验
      let endPierNoValidator = (rule, value, callback) => {
        if (value === 0 || parseInt(this.pierForm.startSiteNo) > parseInt(value)) {
          callback(new Error("结束墩号不能小于起始墩号"))
        } else {
          callback();
        }
      };

      //输入的孔跨范围校验
      let siteRangeValidator = (rule, value, callback) => {
        if (new RegExp("^(\\d+(,\\d+|(-\\d+))?,?)+$", "g").test(value)) {
          let siteList = [];
          value.split(",").forEach(item => {
            if (item.includes("-")) {
              item.split("-").forEach(siteNo => siteList.push(siteNo));
            } else {
              siteList.push(item);
            }
          });
          let maxSiteNo = Math.max(...siteList);
          if (maxSiteNo > this.bridgeSiteList.length) {
            callback(new Error("超出最大孔号，请检查"))
          } else {
            callback();
          }
        } else {
          callback(new Error("格式错误,检查是否为英文逗号"))
        }
      };

      return {
        bridgeSiteList: [],
        bridgePartsList: [],
        selectedNode: {siteNo: 0},
        //孔跨表单
        isSiteDialogVisible: false,
        isSiteUpdating: false,
        siteForm: {bridgeSpanCombination: ""},
        siteRules: {
          bridgeSpanCombination: [
            {required: true, message: "请输入跨径组合", trigger: "blur"},
            {validator: spanCombinationValidator, trigger: "blur"}
          ]
        },
        //上部结构类型表单
        superstructureTypeList: [],
        supportTypeList: [],
        materialTypeList: [],
        isSuperstructureUpdating: false,
        isSuperstructureDialogVisible: false,
        superstructureForm: {
          startSiteNo: 0,
          endSiteNo: 0,
          structureTypeId: "",
          partsList: []
        },
        superstructureRules: {
          endSiteNo: [{validator: endSiteNoValidator, trigger: "blur"}],
          structureTypeId: [{required: true, message: "请选择上部结构类型", trigger: "blur"}]
        },
        //桥墩表单
        pierTypeList: [],
        isPierDialogVisible: false,
        pierForm: {
          startSiteNo: 0,
          endSiteNo: 0,
          structureTypeId: "",
          partsList: []
        },
        pierRules: {
          endSiteNo: [{validator: endPierNoValidator, trigger: "blur"}],
          materialTypeId: [{required: true, message: "请选择桥墩材料类型", trigger: "blur"}]
        },
        isPierUpdating: false,
        //桥台表单
        abutmentTypeList: [],
        isAbutmentDialogVisible: false,
        abutmentForm: {
          startSiteNo: 0,
          endSiteNo: 0,
          structureTypeId: "",
          partsList: []
        },
        abutmentRules: {
          endSiteNo: [{validator: endSiteNoValidator, trigger: "blur"}],
          structureTypeId: [{required: true, message: "请选择桥台类型", trigger: "blur"}]
        },
        isAbutmentUpdating: false,
        //孔跨范围添加的表单
        siteRangeDialogTitle: "",
        isSiteRangeDialogVisible: false,
        loadingSiteRange: false,
        siteRangeForm: {
          startSiteNo: 0,
          endSiteNo: 0,
          partsList: []
        },
        siteRangeRules: {
          endSiteNo: [{validator: endSiteNoValidator, trigger: "blur"}]
        },
        isSiteRangeUpdating: false,
        //桥面系添加的表单
        isDeckDialogVisible: false,
        loadingDeck: false,
        isDeckUpdating: false,
        deckForm: {
          siteRange: "",
          partsList: []
        },
        deckRules: {
          siteRange: [
            {required: true, message: "请输入孔跨范围", trigger: "blur"},
            {validator: siteRangeValidator, trigger: "blur"}
          ]
        },
        //伸缩缝的表单
        isExpansionJointDialogVisible: false,
        loadingExpansionJoint: false,
        isExpansionJointUpdating: false,
        expansionJointTypeList: [],
        expansionJointForm: {
          siteRange: "",
          structureTypeId: "",
          partsList: []
        },
        expansionJointRules: {
          siteRange: [
            {required: true, message: "请输入所属墩台号", trigger: "blur"},
            {validator: siteRangeValidator, trigger: "blur"}
          ],
          structureTypeId: [
            {required: true, message: "请选伸缩缝类型", trigger: "blur"}
          ]
        },

        //编辑对话框的表单
        isEditDialogVisible: false,
        isEditing: false,
        editForm: {
          memberTypeName: "",
          structureTypeId: "",
          materialTypeId: "",
          positionTypeName: "",
          stakeSide: "",
          specialSectionList: []
        }
      }
    },
    computed: {
      tableTitle() {
        return (!!this.selectedNode.siteNo ? "第" + this.selectedNode.siteNo + "孔" : "") + "构件管理";
      },
      superstructureTypeSelectData() {
        let result = [];
        let pNodes = this.superstructureTypeList.filter(item => !item.parentId);
        let cNodes = this.superstructureTypeList.filter(item => !!item.parentId);
        pNodes.forEach(pNode => result.push({children: childrenArrayOf(pNode, cNodes), ...pNode}));
        return result;
      },
      hasMaterialType() {
        let subParts = ["翼墙、耳墙", "锥坡、护坡", "桥墩", "桥台", "墩台基础"];
        if (this.editForm.positionTypeName === "下部结构") {
          return subParts.includes(this.editForm.partsTypeName);
        } else {
          return this.editForm.partsTypeName === "桥面铺装";
        }
      },
      canAdd() {
        return true;//hasAuthorizedFunction(this, ADD);
      },
      canEdit() {
        return true;//hasAuthorizedFunction(this, EDIT);
      },
      canDelete() {
        return true;//hasAuthorizedFunction(this, DELETE);
      }
    },
    methods: {
      handleBack() {
        this.$emit("onBack");
      },
      handleNodeClick(data) {
        this.selectedNode = data;
        this.fetchBridgePartsData();
      },
      handleSiteManage() {
        this.siteForm.bridgeSpanCombination = this.currentSide.bridgeSpanCombination == undefined ? null : this.currentSide.bridgeSpanCombination;
        this.isSiteDialogVisible = true;
      },
      handleSuperstructure() {
        clearFields(this.superstructureForm);
        this.isSuperstructureDialogVisible = true;
        this.superstructureForm.partsList = [];
      },

      handleSuperstructureTypeChange(superstructureTypeId) {
        doGet(SUPER_PARTS_DATA_URL, {
          data: {superstructureTypeId},
          component: this
        })
          .then(response => {
            response.forEach(item => {
              if (item.stakeSide === 0) item.stakeSide = null
            });
            this.superstructureForm.partsList = response;
          })
      },
      handlePier() {
        doGet(PIER_PARTS_DATA_URL, {component: this}).then(response => this.pierForm.partsList = response);
        clearFields(this.pierForm);
        this.isPierDialogVisible = true;
      },
      handleAbutment() {
        clearFields(this.abutmentForm);
        this.isAbutmentDialogVisible = true;
        this.abutmentForm.partsList = [];
      },
      handleAbutmentTypeChange(abutmentTypeId) {
        doGet(ABUTMENT_PARTS_DATA_URL, {
          data: {abutmentTypeId},
          component: this
        })
          .then(response => this.abutmentForm.partsList = response);
      },
      handleRiverbed() {
        this.loadingSiteRange = true;
        clearFields(this.siteRangeForm);
        this.siteRangeDialogTitle = "批量添加或修改河床";
        this.isSiteRangeDialogVisible = true;
        doGet(RIVERBED_PARTS_DATA_URL, {component: this})
          .then(response => this.siteRangeForm.partsList = response)
          .finally(() => this.loadingSiteRange = false);
      },
      handleRegulatingStructure() {
        this.loadingSiteRange = true;
        clearFields(this.siteRangeForm);
        this.siteRangeDialogTitle = "批量添加或修改调治构造物";
        this.isSiteRangeDialogVisible = true;
        doGet(REGULATING_STRUCTURE_PARTS_DATA_URL, {component: this})
          .then(response => this.siteRangeForm.partsList = response)
          .finally(() => this.loadingSiteRange = false);
      },
      handleDeck() {
        this.loadingDeck = true;
        clearFields(this.deckForm);
        this.isDeckDialogVisible = true;
        doGet(DECK_PARTS_DATA_URL, {component: this})
          .then(response => this.deckForm.partsList = response)
          .finally(() => this.loadingDeck = false);
      },
      handleExpansionJoint() {
        this.loadingExpansionJoint = true;
        clearFields(this.expansionJointForm);
        this.isExpansionJointDialogVisible = true;
        doGet(EXPANSION_JOINT_PARTS_DATA_URL, {component: this})
          .then(response => this.expansionJointForm.partsList = response)
          .finally(() => this.loadingExpansionJoint = false);
      },
      handleEdit(data) {
        //加载对话框
        this.isEditDialogVisible = true;
        this.editForm = {...data};
        //先处理几个特殊的字段
        if (!this.editForm.stakeSide) this.editForm.stakeSide = null;
        else this.editForm.stakeSide = data.stakeSide.toString();
        if (!!this.editForm.specialSection) this.editForm.specialSectionList = this.editForm.specialSection.split(",");
      },
      handleDelete(data) {
        this.$confirm("此操作将删除该部构件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          doDelete(DELETE_URL, {
            data: data,
            menuFunctionId: getAuthorizedFunction(this, DELETE),
            component: this
          })
            .then(response => {
              this.$message({message: response.message, type: response.status.toLowerCase()});
              this.fetchSiteData();
            });
        });
      },
      editParts() {
        console.log(this.expansionJointTypeList);
        console.log(this.editForm);
        this.isEditing = true;
        doPost(EDIT_URL, {
          data: this.editForm,
          menuFunctionId: getAuthorizedFunction(this, EDIT),
          component: this
        })
          .then(response => response => this.$message({message: response.message, type: response.status.toLowerCase()}))
          .finally(() => {
            this.isEditing = false;
            this.isEditDialogVisible = false;
            this.fetchSiteData();
          })
      },
      //批量修改上部结构
      updateSuperstructure() {
        this.$refs["superstructureForm"].validate(valid => {
          if (valid) {
            this.isSuperstructureUpdating = true;
            doPost(ADD_SUPERSTRUCTURE_URL, {
              data: {
                bridgeId: this.currentSide.bridgeId,
                sideTypeId: this.currentSide.sideTypeId,
                ...this.superstructureForm
              },
              menuFunctionId: getAuthorizedFunction(this, ADD),
              component: this
            })
              .then(response => this.$message({message: response.message, type: response.status.toLowerCase()}))
              .finally(() => {
                this.isSuperstructureUpdating = false;
                this.isSuperstructureDialogVisible = false;
                this.fetchSiteData();
              });
          }
        });
      },
      //批量修改桥墩
      updatePier() {
        this.$refs["pierForm"].validate(valid => {
          if (valid) {
            this.isPierUpdating = true;
            doPost(ADD_PIER_URL, {
              data: {
                bridgeId: this.currentSide.bridgeId,
                sideTypeId: this.currentSide.sideTypeId,
                ...this.pierForm
              },
              menuFunctionId: getAuthorizedFunction(this, ADD),
              component: this
            })
              .then(response => this.$message({message: response.message, type: response.status.toLowerCase()}))
              .finally(() => {
                this.isPierUpdating = false;
                this.isPierDialogVisible = false;
                this.fetchSiteData();
              });
          }
        });
      },
      updateAbutment() {
        this.$refs["abutmentForm"].validate(valid => {
          if (valid) {
            this.isAbutmentUpdating = true;
            doPost(ADD_ABUTMENT_URL, {
              data: {
                bridgeId: this.currentSide.bridgeId,
                sideTypeId: this.currentSide.sideTypeId,
                ...this.abutmentForm
              },
              menuFunctionId: getAuthorizedFunction(this, ADD),
              component: this
            })
              .then(response => this.$message({message: response.message, type: response.status.toLowerCase()}))
              .finally(() => {
                this.isAbutmentUpdating = false;
                this.isAbutmentDialogVisible = false;
                this.fetchSiteData();
              });
          }
        })
      },
      updateSiteRange() {
        this.$refs["siteRangeForm"].validate(valid => {
          if (valid) {
            this.isSiteRangeUpdating = true;
            doPost(ADD_SITE_RANGE_URL, {
              data: {
                bridgeId: this.currentSide.bridgeId,
                sideTypeId: this.currentSide.sideTypeId,
                ...this.siteRangeForm
              },
              menuFunctionId: getAuthorizedFunction(this, ADD),
              component: this
            })
              .then(response => this.$message({message: response.message, type: response.status.toLowerCase()}))
              .finally(() => {
                this.isSiteRangeUpdating = false;
                this.isSiteRangeDialogVisible = false;
                this.fetchSiteData();
              });
          }
        });
      },
      updateDeck() {
        this.$refs["deckForm"].validate(valid => {
          if (valid) {
            this.isDeckUpdating = true;
            doPost(ADD_DECK_URL, {
              data: {
                bridgeId: this.currentSide.bridgeId,
                sideTypeId: this.currentSide.sideTypeId,
                ...this.deckForm
              },
              menuFunctionId: getAuthorizedFunction(this, ADD),
              component: this
            })
              .then(response => this.$message({message: response.message, type: response.status.toLowerCase()}))
              .finally(() => {
                this.isDeckUpdating = false;
                this.isDeckDialogVisible = false;
                this.fetchSiteData();
              });
          }
        });
      },
      updateExpansionJoint() {
        this.$refs["expansionJointForm"].validate(valid => {
          if (valid) {
            this.isExpansionJointUpdating = true;
            doPost(ADD_EXPANSION_JOINT_URL, {
              data: {
                bridgeId: this.currentSide.bridgeId,
                sideTypeId: this.currentSide.sideTypeId,
                ...this.expansionJointForm
              },
              menuFunctionId: getAuthorizedFunction(this, ADD),
              component: this
            })
              .then(response => this.$message({message: response.message, type: response.status.toLowerCase()}))
              .finally(() => {
                this.isExpansionJointUpdating = false;
                this.isExpansionJointDialogVisible = false;
                this.fetchSiteData();
              });
          }
        });
      },
      //更新孔跨
      updateSite() {
        this.$refs["siteForm"].validate(valid => {
          if (valid) {
            this.isSiteUpdating = true;
            doPost(ADD_SITE_URL, {
              data: {
                id: this.currentSide.id,
                bridgeId: this.currentSide.bridgeId,
                sideTypeId: this.currentSide.sideTypeId,
                bridgeSpanCombination: this.siteForm.bridgeSpanCombination
              },
              menuFunctionId: getAuthorizedFunction(this, ADD),
              component: this
            })
              .then(response => this.$message({message: response.message, type: response.status.toLowerCase()}))
              .finally(() => {
                this.isSiteUpdating = false;
                this.isSiteDialogVisible = false;
                //别忘记更新修改后的跨径组合
                this.currentSide.bridgeSpanCombination = this.siteForm.bridgeSpanCombination;
                this.fetchSiteData(this.resetSelection);
              });
          }
        })
      },
      resetSelection() {
        // this.selectedNode = this.bridgeSiteList[0];
        if (Array.isArray(this.bridgeSiteList) && this.bridgeSiteList.length > 0) {
          this.selectedNode = this.bridgeSiteList[0];
        }
      },
      fetchSiteData(onFetched) {
        this.$store.commit(LOADING);
        doGet(SITE_DATA_URL, {
          data: {
            bridgeId: this.currentSide.bridgeId,
            sideTypeId: this.currentSide.sideTypeId
          },
          component: this
        })
          .then(response => {
            var arr = [];
            this.bridgeSiteList = response == null ? arr : response;
            if (typeof onFetched === "function") onFetched();
            this.fetchBridgePartsData();
          });
      },
      fetchBridgePartsData() {
        this.$store.commit(LOADING);
        doGet(BRIDGE_PARTS_DATA_URL, {
          data: {
            bridgeId: this.currentSide.bridgeId,
            sideTypeId: this.currentSide.sideTypeId,
            siteNo: this.selectedNode.siteNo
          },
          component: this
        })
          .then(response => {
            response = appendMergeProp(response, "positionTypeId", "positionRowSpan");
            this.bridgePartsList = appendMergeProp(response, "partsTypeId", "partsRowSpan");
          })
          .finally(() => this.$store.commit(COMPLETE));
      },
      renderContent(h, {node, data, store}) {
        return h('span', {style: "display:inline-block;width:90%;overflow:hidden;"}, [
          h('span', {}, [data.siteName]),
          h('span', {style: "float:right;margin-right:8px"}, [h('el-tag', {
            style: "text-align:center",
            props: {type: "success"}
          }, [data.memberCount + "个构件"])]),
          h('span', {style: "float:right;margin-right:8px"}, [h('el-tag', {
            style: "text-align:center",
            props: {type: "primary"}
          }, ["跨径" + data.span + "m"])]),
          h('span', {style: "float:right;margin-right:8px"}, [h('el-tag', {
            style: "text-align:center",
            props: {type: "danger"}
          }, [!!data.jointNo ? "第" + data.jointNo + "联" : "未分联"])])
        ]);
      },
      fetchSuperstructureTypeData() {
        doGet(SUPERSTRUCTURE_TYPE_DATA_URL, {component: this}).then(response => this.superstructureTypeList = response);
      },
      fetchMaterialTypeList() {
        doGet(MATERIAL_TYPE_DATA_URL, {component: this}).then(response => this.materialTypeList = response);
      },
      fetchSupportTypeList() {
        doGet(SUPPORT_TYPE_DATA_URL, {component: this}).then(response => this.supportTypeList = response);
      },
      fetchPierTypeList() {
        doGet(PIER_TYPE_DATA_URL, {component: this}).then(response => this.pierTypeList = response);
      },
      fetchAbutmentTypeList() {
        doGet(ABUTMENT_TYPE_DATA_URL, {component: this}).then(response => this.abutmentTypeList = response);
      },
      fetchExpansionJointTypeList() {
        doGet(EXPANSION_JOINT_TYPE_DATA_URL, {component: this}).then(response => this.expansionJointTypeList = response);
      },
      containVerticalNo(memberDesc) {
        return new RegExp("\\{" + VERTICAL_NO + "\\}", "g").test(memberDesc);
      },
      containHorizontalNo(memberDesc) {
        return new RegExp("\\{" + HORIZONTAL_NO + "\\}", "g").test(memberDesc);
      },
      containStakeSide(memberDesc) {
        return new RegExp("\\{(" + STAKE_SIDE + "|" + PIER_NO + ")\\}", "g").test(memberDesc);
      },
      containSpecialSection(memberDesc) {
        return new RegExp("\\{" + SPECIAL_SECTION + "\\}", "g").test(memberDesc);
      },
      treeOf
    },
    created() {
      this.fetchSiteData(this.resetSelection);
      this.fetchSuperstructureTypeData();
      this.fetchMaterialTypeList();
      this.fetchSupportTypeList();
      this.fetchPierTypeList();
      this.fetchAbutmentTypeList();
      this.fetchExpansionJointTypeList();
    }
  }
</script>

<style scoped>
  .tree-view-scrollable {
    max-height: 600px;
    border: 0;
  }

  .el-dialog customWidth {
    width: 30%;
  }

  .btn-area {
    padding: 0 0 12px 0;
  }

  .member-name {
    width: 105px;
    text-align: right;
  }

  .input-label {
    width: 105px;
  }

  .input-item {
    width: 120px;
  }

  .check-item {
    width: 110px;
  }

  .check-item.group {
    width: 190px;
  }
</style>


// WEBPACK FOOTER //
// MemberManagement.vue?2b950480
